<template>
  <div>
    <div class="list-btn">
      已销账姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      已销账手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      已销账订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable
      @keyup.enter.native="getList(url)"/>
    </div>
    <!-- <div class="list-btn">
      结清时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px"  ></DatePicker>
    </div> -->
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="ok">销账与减免</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
      <Modal
      v-model="show"
      title="销账与减免"
      width="750px"
      :footer-hide="true"
      :loading="loading"
      :closable="false"
      :mask-closable="false">
      <Form ref="formRole" :rules="ruleValidate" :model="formRole" :label-width="110">
        <FormItem label="需要销账订单号" prop="nid">
            <Input v-model.trim="formRole.nid" placeholder="请输入订单号" style="width: 200px" clearable  @on-change="getValid"/>
            <Button type="primary" @click="getOrder">搜索</Button>
        </FormItem>
        <!-- <Table  border :columns="dataTitle" :data="data" class="orderTable"></Table> -->
         <Card style="margin-bottom:24px;margin-right:10px;">
            <p slot="title">需要销账订单信息</p>
            <p  v-if="errorMsg" style="color:#ed4014">{{errorMsg}}</p>
               <Row span="24"  class="orderDetail">
                  <Col  :xs="24" :md="12" :lg="8" v-for="(item,index) in orderData" :key="index">
                    <p> <span>{{item.label}}</span><span>{{item.text}}</span></p>
                  </Col>
               </Row>
         </Card>
        <FormItem label="销账金额" prop="repayMoney">
          <Input v-model="formRole.repayMoney" placeholder="请输入" style="width:200px" number @on-change="getValid"></Input>
        </FormItem>
         <FormItem label="减免金额" prop="reduceMoney">
          <Input v-model="formRole.reduceMoney" placeholder="请输入" style="width:200px" number></Input>
        </FormItem>
        <FormItem label="上传凭证" prop="voucherUrl">
           <Upload
            v-model="formRole.voucherUrl"
            accept="image/*"
            :action="uploadUrl"
            :data='data'
            name="upfile"
            :paste='true'
           :show-upload-list='false'
           :before-upload="handleUpload"
           :on-progress="handleProgress"
            :on-success="handleSuccess"
            :on-error='handleError'
            :on-exceeded-size="handleSize"
            :on-format-error = "handleFormat"
           >
            <div class="picture">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <Icon type="ios-add" size="80" v-else></Icon>
            </div>
          </Upload>
           <p  v-if="imageUrl" style="cursor:pointer;color:#2d8cf0;font-size:14px;" @click="visible = true">查看图片</p>
        </FormItem>
          <!-- <div class="demo-upload-list">
          <div v-if="imageUrl">
            <img :src="imageUrl">
            <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove"></Icon>
            </div>
          </div>
        <div v-else>
            <p>111111</p>
       </div>
    </div> -->
        <!-- <FormItem label="状态" prop="deleted">
          <Select clearable v-model="formRole.deleted" placeholder="请选择" style="width:200px">
            <Option :value=0>启用</Option>
            <Option :value=1>禁用</Option>
          </Select>
        </FormItem> -->
      </Form>
        <Modal title="查看图片" v-model="visible"  class="viewImg">
          <img :src="imageUrl" v-if="visible">
        </Modal>
      <div style="margin-left: 510px;text-align:right">
        <Button @click="show = false;imageUrl='';resetValidate('formRole');orderData=[];showBtn=false">取消</Button>
        <Button type="primary" @click="submitModal" v-if="showBtn" >确定</Button>
        <Button type="primary"  disabled v-else>确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import uploadImg from '../../template/uploadImgs'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      uploadImg
    },
    data () {
      return {
        data:{
          token: sessionStorage.getItem('token'),
          jobId: (+new Date())
        },
        imageUrl:'',
        showBtn:false,
        errorMsg:'',
        uploadUrl: `${this.$http.defaults.base}/file/upload/api`,
        tag: {
          'title': '销账与减免',
          'path': '/work/repay/list'
        },
        show:false,
        visible:false,
        listTitle: [
          {
            title: '订单号',
            minWidth: 150,
            key: 'nid',
            align:'left',
          },

          {
            title: '姓名',
            key: 'realname',
            minWidth:60,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            minWidth:100,
            align:'center',
            render: (h, params) => {
              let phone = params.row.phone;
              return h('div', `${phone.substr(0,3)}****${phone.substr(7)}`)
            }
          },
          {
            title: '商户名称',
            key: 'merchantName',
            minWidth:60,
            align:'center',
          },
          {
            title: '产品名称',
            key: 'productName',
            minWidth:60,
            align:'center'
          },
          {
            title: '借款金额(元)',
            key: 'loanMoney',
            minWidth:80,
            align:'center',
            render:(h,params) =>{
              return h('div',this.toYuan(params.row.loanMoney))
            }

          },
          {
            title: '实放金额(元)',
            key: 'realMoney',
            minWidth:80,
            align:'center',
            render:(h,params) =>{
              return h('div',this.toYuan(params.row.realMoney))
            }
          },
          {
            title: '应还金额(元)',
            key: 'needRepayment',
            minWidth:80,
            align:'center',
           render:(h,params) =>{
              return h('div',this.toYuan(params.row.needRepayment))
            }
          },
          {
            title: '已还金额(元)',
            key: 'repaymentMoney',
            minWidth:80,
            align:'center',
            render:(h,params) =>{
              return h('div',this.toYuan(params.row.repaymentMoney))
            }
          },
          {
            title: '销账金额(元)',
            key: 'salesAmount',
            minWidth:80,
            align:'center',
             render:(h,params) =>{
              return h('div',this.toYuan(params.row.salesAmount))
            }
          },

          {
            title: '销账人',
            key: 'financeUserName',
            minWidth:60,
            align:'center',
          },
          {
            title: '减免金额(元)',
            key: 'reduceAmount',
            minWidth:80,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.reduceAmount))
            }
          },

          {
            title: '凭证URL',
            key: 'voucherUrl',
            minWidth:120,
            align:'center',
            render:(h,params) => {
              return h('img',
              {
                attrs: {
                  src:params.row.voucherUrl,
                },
                style:{
                  width:'75px',
                  height:'38px',
                  textAlign:'center',
                  verticalAlign:'middle'
                },
                on:{
                  click:() => {
                    window.open(params.row.voucherUrl)
                  }
                }
              })
            }

          },
          {
            title: '销账时间',
            key: 'createTime',
            minWidth:140,
            align:'center',
            render: (h, params) => {
              return h('div', this.getLocalTime(params.row.createTime))
            }
          },
        ],
        dataTitle:[
          {
            title: '姓名',
            key: 'realname',
            align:'center',
            //  render: (h, params) => {
            //   return h('strong', params.row.type);
            // }
          },
          {
            title: '手机号',
            key:'phone',
            align:'center'
          },
          {
            title: '贷款金额',
            key: 'loanMoney',
            align:'center'
          },
          {
            title: '借款周期',
            key: 'loanDay',
            align:'center',


          },
           {
            title: '银行名称',
            key: 'bankName',
            align:'center',


          },
           {
            title: '银行卡号',
            key: 'bankNum',
            align:'center'

          },
           {
            title: '合同开始时间',
            key: 'borrowTime',
            align:'center',

          },
           {
            title: '合同结束时间',
            key: 'repayTime',
            align:'center',

          },
           {
            title: '应还金额',
            key: 'needRepayment',
            align:'center',

          },
          {
            title: '已还金额',
            key: 'repaymentMoney',
            align:'center',

          },
          {
            title: '逾期天数',
            key: 'days',
            align:'center',

          },
          {
            title: '状态 ',
            key: 'status',
            align:'center',
          },

        ],
        orderData:[],
        url: '/bksalesrecord/list',
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
        show:false,
        nid:'',
        formRole: {},
        type:'销账',
        ruleValidate: {
           nid: [
            { required: true, message: '请输入正确的订单号', trigger: 'blur'}
          ],
          repayMoney: [
            { required: true, message: '请输入金额', trigger: 'blur' ,type:'number'}
          ],
          voucherUrl: [
            { required: true, message: '请选择图片', trigger: 'blur' }
          ],
        },
      }
    },
    mounted(){

    },
    // computed:{
    //   showBtn(){
    //     // return  this.$refs.formRole.validate()
    //   }
    // },
    methods:{
      getValid(){
        this.$refs.formRole.validate((valid) => {
          if(valid){
            this.showBtn = true
          }else{
            this.showBtn = false
          }
        })
      },
      handleUpload(file){
        console.log(file,'file');
        this.file = file;
        return true;
      },
      handleProgress( event, file, fileList){
        console.log(file,'progess');
      },
      handleSuccess (res, file) {
        console.log(res,'res')
        if(res.code == 0){
          this.formRole.voucherUrl = res.data;
          this.imageUrl = res.data;
          console.log(this.formRole.image);
          this.$refs.formRole.validateField('voucherUrl');
          this.getValid();
          this.$Message.success('上传成功')
        }else{
          this.$Message.error(res.msg)
        }


      },
      handleError(error){
        console.log(error,'error');
      },
      handleSize(file){
        console.log(file,'size');
        this.$Message.warning('文件太大了')
      },
      handleFormat(file){
        console.log(file,'handleFormat');
      },
      submitModal(){
        this.formRole.nid = this.nid;
        this.$refs.formRole.validate((valid) => {
          if(valid){
            // console.log(22222);
            let data = {
              nid : this.nid,
              financeUserId: sessionStorage.getItem('adminid'),
              voucherUrl : this.formRole.voucherUrl,
              repayMoney: this.formRole.repayMoney,
              reduceMoney: this.formRole.reduceMoney
            }
            console.log(data,'uuu');
            this.$post('/bksalesrecord/repay',data).then(res => {
              console.log(res,'销账');
              if(res.code == 0){
                this.$Message.success(res.msg);
                this.show = false;
                this.resetValidate('formRole');
                this.orderData =[];
                this.getList(this.url)
              }else if(res.code == 1){
                 this.$Message.error(res.msg);
                 this.show = true;
                //  this.resetValidate('formRole');
                //  this.orderData =[];
              }else{
                this.$Message.error(res.msg);
                this.show = false;
                this.resetValidate('formRole');
                this.orderData =[];
              }
            })

          }

        })
      },
      ok(){
          this.show = true;
          this.errorMsg = '';
       },
       getOrder(){
        this.$post('/bkcontract/repay/info',{
          nid: this.formRole.nid
        }).then(res => {
          if(res.code == 0){
            if(res.data.length > 0){
             let data = res.data[0];
             this.formRole.nid = data.nid;
             this.nid = data.nid;
             let status = this.getType(data.status,'payStatus');
              let loanMoney = this.toYuan(data.loanMoney);
              let borrowTime = this.getLocalDate(data.borrowTime);
              let repayTime = this.getLocalDate(data.repayTime);
              let needRepayment = this.toYuan(data.needRepayment);
              let repaymentMoney = this.toYuan(data.repaymentMoney);
             this.orderData=[
        {
          label:'	姓名：',
          text:data.realname
        },
        {
          label:'手机号：',
          text:data.phone
        },
        {
          label:'贷款金额（元）：',
          text:loanMoney
        },
        {
          label:'借款周期：',
          text:data.loanDay
        },
        {
          label:'银行名称：',
          text:data.bankName
        },
        {
          label:'银行卡号：',
          text:data.bankNum
        },
        {
          label:'合同开始时间：',
          text:borrowTime
        },
        {
          label:'合同结束时间：',
          text:repayTime
        },
        {
          label:'应还金额(元)：',
          text:needRepayment
        },
        {
          label:'逾期天数：',
          text:data.days
        },
        {
          label:'状态：',
          text:status.name
        },
        {
          label:'已还金额(元)：',
          text:repaymentMoney
        },

      ]
            }
          }else if(res.code == 1){
            this.errorMsg = res.msg
            // this.$Message.error(res.msg);
          }
        })
      }

    },
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
 .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
.viewImg{
  overflow: auto;
  img{
    width:100%;
  }
}
/deep/ .orderTable {
  margin-bottom:24px;
  .ivu-table-cell {
    padding-left: 4px;
    padding-right: 4px;
  }
}
/deep/ .ivu-card-head {
    padding: 10px 18px;
}
.orderDetail{
  p{
    margin-bottom:5px;
    span:nth-of-type(1){
      color:#333;
    }
  }
}
/deep/ .ivu-table-cell {
    padding-left: 5px;
    padding-right: 5px;
}

</style>
